{"componentChunkName":"component---src-templates-post-js","path":"/simply-learn-full-stack-1","result":{"data":{"site":{"siteMetadata":{"title":"neohed","description":"Blog posts on web development and related areas","author":{"name":"neohed"},"keywords":["Web Development","JavaScript"]}},"mdx":{"frontmatter":{"title":"Simply Learn Full-Stack Web, Part 1","description":"Tutorial to learn full-stack with React node.js and Prisma DB","date":"June 27, 2022","author":null,"banner":null,"slug":"simply-learn-full-stack-1","keywords":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"slug\": \"simply-learn-full-stack-1\",\n  \"date\": \"2022-06-27T08:36:32\",\n  \"title\": \"Simply Learn Full-Stack Web, Part 1\",\n  \"description\": \"Tutorial to learn full-stack with React node.js and Prisma DB\",\n  \"published\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Simply Learn Full-Stack React & Node.js\"), mdx(\"h2\", null, \"Create the React web-site\"), mdx(\"p\", null, \"Create a folder somewhere for your project. This will hold the client and server code.  I called mine: \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"node-react-stack\"), \" and will be using that folder name throughout.\"), mdx(\"p\", null, \"Inside the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"node-react-stack\"), \" folder, use a shell/CLI to enter this command to create your React app:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-shell\"\n  }), \"npx create-react-app react-client\\n\")), mdx(\"p\", null, \"When that has finished, inside the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"node-react-stack/react-client\"), \" folder, run another command to npm install react-router:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-shell\"\n  }), \"npm i -S react-router-dom\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Make sure that npm install commands like this are run in the same folder where your package.json file is located.\")), mdx(\"p\", null, \"Next open up the react-client project in an editor.\"), mdx(\"p\", null, \"Inside the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"src\"), \" folder create a new file called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"AddEditNote.js\"), \" and paste in this code:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from 'react';\\n\\nconst AddEditNote = () => {\\n    return (\\n        <div>\\n            Add Edit Note\\n        </div>\\n    );\\n};\\n\\nexport default AddEditNote;\\n\")), mdx(\"p\", null, \"Next edit \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"App.js\"), \" and change the code to:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import {\\n    Link,\\n    HashRouter as Router,\\n    Routes,\\n    Route,\\n} from 'react-router-dom';\\nimport AddEditNote from \\\"./AddEditNote\\\";\\nimport './App.css';\\n\\nfunction App() {\\n    return (\\n        <div className=\\\"App\\\">\\n            <Router>\\n                <Routes>\\n                    <Route exact path=\\\"/\\\" element={\\n                        <ul>\\n                            <li>\\n                                <Link to=\\\"edit-note\\\">Edit Note</Link>\\n                            </li>\\n                        </ul>\\n                    }/>\\n                    <Route path=\\\"/edit-note\\\" element={<AddEditNote/>}/>\\n                </Routes>\\n            </Router>\\n        </div>\\n    );\\n}\\n\\nexport default App;\\n\")), mdx(\"p\", null, \"To test this, inside the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"node-react-stack/react-client\"), \" folder, run:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-shell\"\n  }), \"npm run start\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Just as with npm install above, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm run\"), \" commands must be executed from the same folder as your package.json file. The reason is that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm run start\"), \" runs the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"start\")), \" script defined in your package.json file.\")), mdx(\"p\", null, \"When your React app finishes building, a browser should appear, showing an \\\"Edit Note\\\" link. Clicking that will display the text: \\\"Add Edit Note\\\"\"), mdx(\"p\", null, \"Good job - your client app and routing are working!\"), mdx(\"p\", null, \"Next: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/simply-learn-full-stack-2\"\n  }), \"Add a form\")), mdx(\"p\", null, \"Code repo: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/neohed/node-react-stack\"\n  }), \"Github Repository\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"id":"f627dbc6-3dce-5cac-bd70-07cbe3b26c04","prev":{"id":"b2d39b32-1682-5417-9f36-48b85c6d930b","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"Simply Learn Full-Stack React & Node.js An easy tutorial series that teaches full-stack with React, Node.js, Prisma and SqlLite DB This series is simple and fast.  The code repo link will be at the bottom of each post. To use this tutorial there's no…","fields":{"title":"Simply Learn Full-Stack Web","description":"Tutorial to learn full-stack with React node.js and Prisma DB","slug":"simply-learn-full-stack-intro","absolutePath":"D:/Workspace/Github/neohed-blog/content/blog/learn-full-stack-simply-00/index.mdx","banner":null,"date":"2022-06-27T08:36:32"}},"next":{"id":"2dec4ce8-7bf3-555d-80f7-a06fd8cce40b","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"Simply Learn Full-Stack React & Node.js Inside folder  node-server , create a new folder called \"controllers.\"  Inside add a file called  note.controller.js  and add the following code: Why  .controller.js ? In a complex app, you will have many…","fields":{"title":"Full-Stack React & Node.js, Part 4 - Get data from server","description":"Tutorial to learn full-stack with React node.js and Prisma DB","slug":"simply-learn-full-stack-4","absolutePath":"D:/Workspace/Github/neohed-blog/content/blog/learn-full-stack-simply-04/index.mdx","banner":null,"date":"2022-06-27T08:36:32"}}}}}